<template>
  <div class="home">
    <div class="navheaders">
      <van-nav-bar>
        <!--<template #left>-->
          <!--<van-icon v-if="isshow" name="arrow-left" color="#fff" size="0.6rem" />-->
        <!--</template>-->
        <template #title>
          <span>
            <img src="../../assets/img/logo.png" />
          </span>
        </template>
        <!--<template #right>-->
          <!--<van-icon name="wap-nav" color="#fff" size="0.6rem" />-->
        <!--</template>-->
      </van-nav-bar>
    </div>
    <div style="width: 100%; height: 6px; background-color: #f7f7f7"></div>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div v-for="(item, index) in list" :key="index">
      <router-link :to="{ path: '/newsDetail/' + item.id}">
      <van-cell-group>
        <van-cell border clickable isLink>
          <template #title>
            <span class="custom-title">{{item.title}}</span>
          </template>
          <template #label>
            <span class="custom-value">{{item.noticeTime}}</span>
          </template>
        </van-cell>
      </van-cell-group>
      </router-link>
      <div style="width: 100%; height: 6px; background-color: #f7f7f7"></div>
    </div>
  </van-list>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1,
      size: 10,
      total: 0x3f3f3f3f
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      let menuId = this.$route.params.menuId
      console.log(menuId)
      axios.get('https://www.zsrencai.cn/zsrencai/api/ms/news/home/list/page?menuId=' +
        menuId + '&page=' + this.page + '&size=' + this.size).then((res) => {
        let data = res.data.data
        let records = data.records
        this.total = data.total
        console.log(data.total)
        for (let r of records) {
          this.list.push(r)
        }
        this.page += 1
        this.loading = false
        if (this.list.length >= this.total) {
          this.finished = true
        }
      })
    }
  }
}
</script>
<style>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
    float: left;
    font-weight: bold;
    text-align: left;
    width: 100%;
  }
  .custom-value {
    margin-right: 4px;
    vertical-align: middle;
    color: #ccc;
    float: left;
  }
  .card {
    width: 80%;
  }
</style>
